<template>

  <div class="app-container home">

  <el-form label-width="80px" style="display: flex; justify-content: center; padding: 30px"
           ref="form" :model="form" :rules="rules">
    <el-row>
      <el-col :span="24" style="margin: 6px; display: flex;">
        <el-form-item style="width: 100%" label="主题名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入主题名称"/>
        </el-form-item>
      </el-col>


      <el-col :span="24" style="margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="出现位置" prop="searchArea">
          <el-radio-group v-model="form.searchArea">
            <el-radio v-for="dict in searchAreaOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue">{{dict.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="24" style="margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="情感特征" prop="emotion">
          <el-checkbox-group v-model="form.monitoringEmotion" >
            <el-checkbox
              v-for="dict in emotionalCharacteristicsOptions"
              :key="dict.dictLabel"
              :label="dict.dictLabel"
            >
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="信息载体" prop="mediaType">
          <el-checkbox-group v-model="form.monitoringMedia">
            <el-checkbox
              v-for="dict in mediaTypeOptions"
              :key="dict.dictLabel"
              :label="dict.dictLabel"
            >
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <div style="height: 6px; width: 100%"/>
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="相关词" prop="relatedWords">
          <el-input v-model="form.relatedWords" type="textarea"
                    :rows="5" placeholder="请输入关键字" :maxlength="500" show-word-limit/>
          <div style="display: flex; justify-content: space-between; align-items: center;
                      position: absolute; top: -30px; width: 100%">
            <span style="font-size: 12px">关键词添加支持逻辑规则：“*”（与）、“,”（或）、“()”（词组）；不支持单个关键字</span>
            <el-link type="primary">
              <div class="key-tips">关键词组合逻辑</div>
            </el-link>
          </div>
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px"/>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="舆情词" prop="opinionWords">
          <el-input v-model="form.opinionWords" type="textarea"
                    :rows="5" placeholder="请输入舆情词" :maxlength="500" show-word-limit/>
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px"/>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="position: relative; top: 20px; margin: 6px; display: flex; ">
        <el-form-item style="width: 100%" label="排除词" prop="exclusionWords">
          <el-input v-model="form.exclusionWords" type="textarea"
                    :rows="5" placeholder="请输入舆情词" :maxlength="500" show-word-limit/>
          <el-tooltip class="item"
                      effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
            <img src="../../../assets/images/tips9.svg"
                 style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px"/>
          </el-tooltip>
        </el-form-item>
      </el-col>


      <el-col :span="24" style="text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">重 置</el-button>
      </el-col>
    </el-row>
  </el-form>

  </div>
</template>

<script>
  import {addTopic, updateTopic} from "@/api/system/topic"


  export default {
    components: {},
    data() {

      const checkEmotion = (rule, value, callback) => {
        if ((this.form.monitoringEmotion || []).length === 0) {
          return callback(new Error('请选择需要监测的舆情情感'))
        } else {
          return callback()
        }
      }
      const checkMediaType = (rule, value, callback) => {
        if ((this.form.monitoringMedia || []).length === 0) {

          return callback(new Error('请选择需要监测的舆情载体'))
        } else {

          return callback()
        }
      }
      return {
        showCronBox: false,
        // 表单参数
        form: {
          monitoringEmotion: [],
          monitoringMedia: [],
          id: null,
          createdTime: null,
          title: null,
          userId: null,
          searchArea: null,
          relatedWords: null,
          opinionWords: null,
          exclusionWords: null,
          type:'comprehensive'
        },
        // 表单参数
        params: {
          monitoringEmotion: null,
          monitoringMedia: null,
          id: null,
          title: null,
          searchArea: null,
          relatedWords: null,
          opinionWords: null,
          exclusionWords: null,
          type:'comprehensive'
        },
        rules: {
          title: [
            {required: true, message: "主题名称不能为空", trigger: "blur"}
          ],
          emotion: [
            {required: true, validator: checkEmotion}
          ],
          mediaType: [
            {required: true, validator: checkMediaType}
          ],
          searchArea: [
            {required: true, message: "出现位置不能为空", trigger: "blur"}
          ],
          relatedWords: [
            {required: true, message: "相关词不能为空", trigger: "blur"}
          ]
        },
        searchAreaOptions: [],
        mediaTypeOptions: [],
        emotionalCharacteristicsOptions: [],
      }
    },
    created() {
      //接收修改传的值
      this.form.id = this.$route.query.id
      this.form.title = this.$route.query.title
      this.form.searchArea = this.$route.query.searchArea
      this.form.relatedWords = this.$route.query.relatedWords
      this.form.opinionWords = this.$route.query.opinionWords
      this.form.exclusionWords = this.$route.query.exclusionWords
      if(this.$route.query.monitoringEmotion!=null){
        this.form.monitoringEmotion = this.$route.query.monitoringEmotion.split(",");
        console.log("接收的monitoringEmotion:",this.form.monitoringEmotion)
      }
      if(this.$route.query.monitoringMedia!=null){
        this.form.monitoringMedia = this.$route.query.monitoringMedia.split(",");
        console.log("接收的monitoringMedia:",this.form.monitoringMedia)
      }
      this.getDicts("search_area_options").then(response => {
        this.searchAreaOptions = response.data;
        if(this.form.id==null){
            this.form.searchArea=this.searchAreaOptions[0].dictValue
        }
      });
      this.getDicts("emotional_characteristics").then(response => {
        this.emotionalCharacteristicsOptions = response.data;
        if(this.form.id==null){
          this.emotionalCharacteristicsOptions.forEach(item=>{
            this.form.monitoringEmotion.push(item.dictLabel)
          })
        }
      });
      this.getDicts("media_type").then(response => {
        this.mediaTypeOptions = response.data;
        if(this.form.id==null){
          this.mediaTypeOptions.forEach(item=>{
            this.form.monitoringMedia.push(item.dictLabel)
          })
        }
      });

    },
    methods: {
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          monitoringEmotion: [],
          monitoringMedia: [],
          id: null,
          title: null,
          searchArea: null,
          relatedWords: null,
          opinionWords: null,
          exclusionWords: null,
          type:'comprehensive'
        };
        this.resetForm("form");
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            //需要转换一下
            console.log("this.form.monitoringEmotion",this.form.monitoringEmotion)
            console.log("this.form.monitoringMedia",this.form.monitoringMedia)
            this.params.monitoringEmotion = this.form.monitoringEmotion.join(',')
            this.params.monitoringMedia = this.form.monitoringMedia.join(',')
            this.params.id = this.form.id
            this.params.title = this.form.title
            this.params.searchArea = this.form.searchArea
            this.params.relatedWords = this.form.relatedWords
            this.params.opinionWords = this.form.opinionWords
            this.params.exclusionWords = this.form.exclusionWords
            this.params.type = this.form.type
            if (this.params.id != null) {
              updateTopic(this.params).then(response => {
                this.msgSuccess("修改成功");
                this.$router.go(-1)
              });
              this.reset()
            } else {
              addTopic(this.params).then(response => {
                this.msgSuccess("新增成功");
                this.back();
              });

            }
          }
        });
      },
      back(){
        this.$router.go(-1);//返回上一层
      },
    }
  }
</script>

<style scoped lang="scss">
  .home {
    background-color: white;
  }
  .key-tips {
    position: relative;
    font-size: 12px;

    &:hover::before {
      content: '';
      position: absolute;
      z-index: 99999;
      top: -324px;
      right: 0px;
      width: 624px;
      height: 324px;
      background: url('../../../assets/images/tishi.svg');
      background-size: cover;
    }
  }
</style>

